● <template>
  <view class="iphone-container">
    <view class="main-content">
      <!-- Logo和应用名称 -->
      <view class="logo-container">
        <view class="logo">
          <view class="logo-icon">
            <view
                v-for="n in 3"
                :key="n"
                class="logo-line"
                :class="'line-' + n"
            />
          </view>
        </view>
        <view class="logo-text">传奇IM</view>
      </view>

      <!-- 登录表单 -->
      <view class="form-container">
        <view class="input-group">
          <input
              class="input-field"
              v-model="username"
              placeholder="请输入账号"
          />
        </view>

        <view class="input-group">
          <input
              class="input-field"
              :type="showPassword ? 'text' : 'password'"
              v-model="password"
              placeholder="请输入密码"
          />
          <view class="input-icon" @click="togglePassword">
            <view class="eye-icon" :class="{ active: showPassword }">
              <view class="eye-outer" />
              <view class="eye-inner" />
            </view>
          </view>
        </view>

        <button class="login-btn" :disabled="loading" @click="handleLogin">
          {{ loading ? '登录中...' : '登 录' }}
        </button>

        <view class="bottom-links">
          <navigator class="bottom-link" url="/pages/views/register">注册账号</navigator>
          <navigator class="bottom-link" url="/pages/views/forgot">忘记密码</navigator>
        </view>
      </view>
    </view>

    <!-- 底部版权信息 -->
    <view class="footer">传奇IM 1.0.0 © 2023-2025</view>
  </view>
</template>


<script setup>
import { ref, onMounted } from '/TUIKit/adapter-vue';
import { TUITranslateService } from '@tencentcloud/chat-uikit-engine';
import { genTestUserSig } from '../../TUIKit/debug';
import { loginChat } from './loginChat';

const username = ref('');
const password = ref('');
const showPassword = ref(false);
const loading = ref(false);

const togglePassword = () => {
  showPassword.value = !showPassword.value;
};

const handleLogin = async () => {
  if (!username.value) {
    uni.showToast({ title: '请输入用户名或者手机号', icon: 'none', duration: 2000 });
    return;
  }
  if (!password.value) {
    uni.showToast({ title: '请输入密码', icon: 'none', duration: 2000 });
    return;
  }

  loading.value = true;
  try {
    const res = await uni.$http('/home/login/login', 'post', {
      phone: username.value,
      pwd: password.value,
    });

    if (res.data.code === 200) {
      const userData = res.data.data;
      uni.setStorageSync('userAppInfo', userData);
      uni.setStorageSync('token', userData.token);
      uni.setStorageSync('userTencentID', userData.user_name);
      uni.setStorageSync('user_id', userData.id);
      uni.setStorageSync('invitationCode', userData.invitation_code);
      handleLoginInfo(userData.user_name);
    } else {
      uni.showToast({ title: res.data.msg, icon: 'none', duration: 2000 });
      loading.value = false;
    }
  } catch (error) {
    uni.showToast({ title: '登录失败，请重试', icon: 'none', duration: 2000 });
    loading.value = false;
  }
};

const handleLoginInfo = (userID) => {
  const options = genTestUserSig({
    SDKAppID: uni.$chat_SDKAppID,
    secretKey: uni.$chat_secretKey,
    userID,
  });

  const loginInfo = {
    SDKAppID: uni.$chat_SDKAppID,
    userID,
    userSig: options.userSig,
    useUploadPlugin: true,
    framework: 'vue2',
    TIMPush: uni.$TIMPush,
    pushConfig: {
      androidConfig: uni.$TIMPushConfigs,
      iOSConfig: { iOSBusinessID: '' },
    },
  };

  loginChat(loginInfo).catch(() => {
    uni.showToast({
      title: TUITranslateService.t('Login.登录失败'),
      icon: 'none',
    });
  });
};

onMounted(() => {
  if (uni.getStorageSync('userTencentID')) {
    uni.navigateTo({ url: '/pages/contact/index' });
  }
});
</script>


<style scoped>
.iphone-container {
  width: 100%;
  min-height: 100vh;
  position: relative;
  background-color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 40px 30px 60px;
  box-sizing: border-box;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.main-content {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.logo-container {
  margin-top: 60px;
  margin-bottom: 60px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.logo {
  width: 90px;
  height: 90px;
  background-color: #186ef2;
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 15px;
  box-shadow: 0 4px 12px rgba(24, 110, 242, 0.2);
}

.logo-icon {
  width: 50px;
  height: 50px;
  position: relative;
}
.logo-line {
  position: absolute;
  background-color: white;
  border-radius: 2px;
}
.line-1 {
  width: 30px;
  height: 6px;
  top: 12px;
  left: 10px;
}
.line-2 {
  width: 20px;
  height: 6px;
  top: 24px;
  left: 10px;
}
.line-3 {
  width: 25px;
  height: 6px;
  top: 36px;
  left: 10px;
}

.logo-text {
  color: #186ef2;
  font-size: 24px;
  font-weight: 500;
}

.form-container {
  width: 100%;
  max-width: 350px;
}

.input-group {
  position: relative;
  margin-bottom: 24px;
  width: 100%;
}

.input-field {
  width: 100%;
  height: 50px;
  border: none;
  border-bottom: 1px solid #e5e5e5;
  padding: 12px 40px 12px 12px;
  font-size: 16px;
  background-color: transparent;
  box-sizing: border-box;
}

.input-field:focus {
  border-color: #186ef2;
  outline: none;
}

/* 隐藏浏览器默认的密码显示按钮 */
.input-field::-ms-reveal,
.input-field::-ms-clear {
  display: none;
}

.input-field::-webkit-credentials-auto-fill-button,
.input-field::-webkit-contacts-auto-fill-button {
  visibility: hidden;
  pointer-events: none;
  position: absolute;
  right: 0;
}

.input-icon {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  padding: 4px;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
}

.eye-icon {
  width: 22px;
  height: 16px;
  position: relative;
  transition: all 0.3s ease;
  display: block;
}
.eye-outer {
  width: 20px;
  height: 12px;
  border: 2px solid #999;
  border-radius: 10px;
  position: absolute;
  top: 2px;
  left: 1px;
  transition: border-color 0.3s ease;
  display: block;
}
.eye-inner {
  width: 6px;
  height: 6px;
  background-color: #999;
  border-radius: 50%;
  position: absolute;
  top: 5px;
  left: 8px;
  transition: background-color 0.3s ease;
  display: block;
}

.eye-icon.active .eye-outer {
  border-color: #186ef2;
}
.eye-icon.active .eye-inner {
  background-color: #186ef2;
}

.login-btn {
  width: 100%;
  height: 50px;
  background-color: #186ef2;
  color: white;
  border: none;
  border-radius: 5px;
  font-size: 17px;
  font-weight: 500;
  margin-top: 30px;
}

.login-btn:disabled {
  background-color: #a8c7f7;
  cursor: not-allowed;
}

.bottom-links {
  display: flex;
  justify-content: space-between;
  width: 100%;
  margin-top: 24px;
  padding: 0 5px;
}

.bottom-link {
  color: #186ef2;
  font-size: 14px;
}

.footer {
  text-align: center;
  font-size: 12px;
  color: #999;
  width: 100%;
  flex-shrink: 0;
  padding: 20px 0;
  margin-top: 40px;
}
</style>
